<template>
  <div class="app-container">
    <!-- 视图切换选择器 -->
    <el-select v-model="viewMode" placeholder="请选择模式">
      <el-option label="查看个人能力雷达图" value="personal" />
      <el-option label="能力雷达图对比" value="compare" />
    </el-select>

    <!-- 查看个人能力雷达图部分 -->
    <div v-if="viewMode === 'personal'">
      <el-select v-model="selectedSemester" placeholder="请选择学期" @change="fetchPersonalRadarData">
        <el-option
          v-for="semester in semesters"
          :key="semester"
          :label="semester"
          :value="semester"
        />
      </el-select>

      <el-card>
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="5" animated />
        </div>
        <div v-else class="radar-chart-container">
          <div ref="radarChartPersonal" class="chart" />
        </div>
      </el-card>
    </div>

    <!-- 能力雷达图对比部分 -->
    <div v-else-if="viewMode === 'compare'">
      <!-- 这里可以嵌入教师端的能力雷达图对比组件或直接复用 -->
      <teacher-radar-comparison />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getMyAbilityRadar } from '@/api/student'
import TeacherRadarComparison from '@/views/teacher/StudentAbilityCompare/index.vue'
export default {
  name: 'AbilityRadar',
  components: {
    TeacherRadarComparison
  },
  data() {
    return {
      viewMode: 'personal', // 默认显示个人能力雷达图
      semesters: [], // 存储学期列表
      selectedSemester: '', // 当前选中的学期
      radarDataPersonal: null, // 个人能力数据
      loading: true,
      radarData: null,
      chart: null
    }
  },
  async mounted() {
    await this.fetchSemesters()
  },
  updated() {
    if (this.radarData && !this.chart) {
      this.renderRadarChart()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    async fetchSemesters() {
      try {
        const res = await getMyAbilityRadar(this.$store.getters.token)
        if (res.success) {
          this.semesters = [...new Set(res.data.map(item => item.semester))]
          this.selectedSemester = this.semesters[0]
          this.radarDataPersonal = res.data
          this.fetchPersonalRadarData()
        }
      } catch (error) {
        console.error('获取学期失败:', error)
      }
    },
    fetchPersonalRadarData() {
      // 根据 selectedSemester 筛选数据
      const filteredData = this.radarDataPersonal.find(
        data => data.semester === this.selectedSemester
      )
      this.loading = false
      this.renderPersonalRadarChart(filteredData)
    },
    renderPersonalRadarChart(data) {
      const chartDom = this.$refs.radarChartPersonal
      if (!chartDom || !data) return
      const chart = echarts.init(chartDom)
      const option = {
        tooltip: {},
        radar: {
          indicator: [
            { name: '专业能力', max: 100 },
            { name: '通识能力', max: 100 },
            { name: '实践能力', max: 100 },
            { name: '创新能力', max: 100 },
            { name: '素质', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          data: [{
            value: [
              data.professionalAbility,
              data.generalAbility,
              data.practicalAbility,
              data.innovationAbility,
              data.quality
            ],
            name: '能力值'
          }]
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.loading-container {
  padding: 20px;
}

.radar-chart-container,
.el-row,
.el-col {
  width: 100%;
  height: 100%;
  display: flex; /* 确保子元素居中 */
  justify-content: center;
  align-items: center;
}

.chart {
  width: 600px;
  height: 500px;
  margin: 0 auto;
}
</style>
